<style>
  .content {
    display: flex;
    justify-content: space-between;
  }

  .content .left {
    width: 87%;
  }

  .content .right {
    width: 12%;

  }

  .content .left .block {
    margin-top: 15px;
  }

  .content .left .block p {
    padding: 0 0 15px;
    font-weight: bold;
  }

  .calendar {
    display: grid;
    grid-template-columns: 1fr 9fr;
    height: 90%;
  }

  .calendar .calendarleft {
    height: 100%;
  }

  .calendar .calendarleft .ctop {
    height: 50px;
    border: 1px solid #000;
    text-align: center;
    line-height: 50px;
    /* border-right: none; */
  }

  .calendar .calendarleft .cbottom {
    height: 90%;
    display: grid;
    justify-items: stretch;
    grid-template-rows: repeat(12, 1fr);

  }

  .calendar .calendarleft .cbottom .week {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    padding: 10px;
    border-top: none;
    height: 40px;
  }



  .calendar .calendarright {
    height: 100%;
  }

  .calendar .calendarright .crtop {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    height: 50px;
  }

  .calendar .calendarright .crtop .weekc {
    font-size: 14px;
  }

  .calendar .calendarright .crtop .rdate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px solid #000;
    text-align: center;
    border-left: none;
  }

  .calendar .calendarright .crbottom {
    height: 90%;
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(5, 1fr);


  }

  .calendar .calendarright .crbottom .box {
    border: 1px solid #000;
    padding: 10px;
    cursor: pointer;
    border-top: none;
    border-left: none;
    height: 40px;
  }

  .calendar .calendarright .crbottom .selecolor {
    background-color: #55c8ab;
    color: #fff;
  }

  .calendar .calendarright .crbottom .laterSelecolor {
    /* background-color: #FFCC22;*/
    background-color: RGB(255, 245, 225);
    color: #000;
  }

  .userList[data='userList'] {
    width: 160px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    height: 750px;
    overflow: auto;
  }

  .nameList[data='nameList'] {
    width: 100%;
  }

  .nameListSpan {
    display: block;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s linear;
  }

  .nameList[data='nameList'] span:hover {
    /* background-color: #e8e8e8; */
    transition: transform 0.25s ease;
    transform: scale(1.002, 1.1);
    box-shadow: 0 0 6px #adadad;
    background-color: #55c8ab !important;
    color: #ffffff;
  }

  .nameListCheck {
    display: block;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s linear;
    background-color: #55c8ab !important;
    color: #ffffff;
    box-shadow: 0 0 6px #adadad;
    transition: transform 0.25s ease;
  }

  .nameList[data='nameList'] span:nth-of-type(odd) {
    background-color: #f2f3f4;
  }

  .el-timeline-item__hover {

    /* 动画 */
    display: inline-block;
    -webkit-animation: styles_pulse-loader__5535u 1.5s ease-out infinite;
    animation: styles_pulse-loader__5535u 1.5s ease-out infinite;
    border-radius: 50%;
    overflow: hidden;
    text-indent: 50px;
    background-color: #0bbd87;
    width: 8px;
    height: 8px;


  }

  @keyframes styles_pulse-loader__5535u {
    0% {
      background-color: #28f3b6;
      box-shadow: 0 0 0 0 rgb(11 189 135 / 0%);
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    20% {
      background-color: #0bbd87;
      box-shadow: 0 0 0 4px rgb(11 189 135 / 60%);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    80% {
      background-color: #28f3b6;
      box-shadow: 0 0 0 8px rgb(11 189 135 / 0%);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  .el-timeline-item__tail {
    height: 68%;
  }

  .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: block;
  }

  .el-timeline {
    display: flex;
    justify-content: space-between;
  }

  .el-timeline-item__wrapper {
    padding-left: 18px;
  }

  .el-timeline-item__dot {
    margin-top: -10px;
    margin-left: 1px;
  }
</style>

<body>
  <div id="app" class="content">
    <div class="right">
      <el-card class="box-card">

        <div class="userList" data="userList">
          <el-input style="margin-bottom: 10px;" @blur="getUserList(userName)" v-model.trim="userName"
            placeholder="请填写名字查找" size="small" suffix-icon="el-icon-search" />
          <div class="nameList" data="nameList">
            <span v-for="(item, index) in nameList"
              :class="[seleName.findIndex(ite => ite===item)>-1 ? 'nameListCheck' : 'nameListSpan']"
              @click="handleUserClick(item)" :key="index">

              {{item.patientName}}
            </span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="left">
      <el-tabs type="border-card" :value="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in zly" :label="item.name" :name="item.id">
          <div class="calendar">
            <div class="calendarleft">
              <div class="ctop">时间段{{item.id}}</div>
              <div class="cbottom">
                <!-- 时间 -->
                <div v-for="item in timeList" class="week">
                  <div style="fontSize:14px;">{{ item }}</div>
                </div>
              </div>
            </div>
            <div class="calendarright">
              <div class="crtop" :style="{'grid-template-columns':'repeat('+date.length+', 1fr)'}">
                <div v-for="(item, index) in date" :key="index" class="rdate">
                  <div style="fontSize:14px;">{{ item.reservation_date }}</div>
                </div>
              </div>
              <div class="crbottom" :style="{'grid-template': 'repeat(12, 1fr) / repeat('+date.length+', 1fr)'}">
                <template v-for="(item, index) in rili">
                  <div :key="index" @click="selectcalendar(item)"
                    :class="[seleArr.findIndex(ite => ite.time==item.time && ite.date.reservation_date==item.date.reservation_date)>-1  ? 'selecolor' : 'laterSelecolor']"
                    class="box">
                    <span> {{seleArr.findIndex(ite=>ite.time==item.time &&
                      ite.date.reservation_date==item.date.reservation_date)>-1?
                      seleArr[seleArr.findIndex(ite=>ite.time==item.time &&
                      ite.date.reservation_date==item.date.reservation_date)].userName:''}}</span>

                  </div>
                </template>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <div class="block">
          <p class="title">今日预约情况</p>
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in reservedToday" :key="index" :icon="activity.icon"
              :type="activity.type" :color="activity.user_name?'#0bbd87':''" :size="activity.size"
              :timestamp="activity.cure_time">
              <div slot="dot">
                <div :class="activity.user_name ? 'el-timeline-item__hover' : ''"></div>
              </div>
              {{activity.user_name||'无预约'}}
            </el-timeline-item>

          </el-timeline>
        </div>
      </el-tabs>
    </div>


  </div>

  <script type="text/javascript">

    require(['bbcare'], function ($bb) {
      var URL = $bb.baseUrl("followup")
      var vm = new Vue({
        el: '#app',
        data () {
          return {
            date: [],
            activeName: "",
            timeList: [],
            zly: [],
            weekArr: [],
            rili: [],
            seleArr: [],
            x: 1,
            tableDate: [],
            nameList: [],
            userName: '',
            seleName: [],
            checkUser: {},
            checkZlyId: 0,
            reservedToday: [],
            activities: [{
              content: '支持使用图标',
              timestamp: '2018-04-12 20:46',
              size: 'large',
              type: 'primary',
              icon: 'el-icon-more'
            }, {
              content: '支持自定义颜色',
              timestamp: '2018-04-03 20:46',
              color: '#0bbd87'
            }, {
              content: '支持自定义尺寸',
              timestamp: '2018-04-03 20:46',
              size: 'large'
            }, {
              content: '默认样式的节点',
              timestamp: '2018-04-03 20:46'
            }]
          }
        },
        created () {
          // this.getMachineTable()
        },
        mounted () {
          this.getUserList()
          this.getMachineTable()
        },
        methods: {

          getMachineTable () {
            let that = this
            $bb.ajax({
              url: URL + "/followup/reserve/get_machine_reservation_table",
              success: function (data) {
                if (data.success) {
                  that.timeList = data.data['可预约的时段']
                  that.zly = data.data['可预约的治疗仪']
                  that.date = data.data['可预约的日期']
                  that.activeName = that.zly[0].id
                  that.checkZlyId = that.zly[0].id
                  that.getMachineReserved(that.zly[0].id)
                  that.getReservedToday(that.zly[0].id)
                  that.Rendering()

                }
              }
            })
          },

          handleClick (tab, event) {
            this.activeName = tab.name
            this.seleArr = []
            console.log('tab', tab)
            console.log('event', event)
            this.checkZlyId = tab.name
            this.getMachineReserved(tab.name)
            this.getReservedToday(tab.name)
          },

          handleUserClick (ite) {
            this.checkUser = ite
            this.seleName = []
            if (this.seleName.findIndex(item => item === ite) > -1) {
              return
            }
            this.seleName.push(ite)
          },

          // 渲染
          Rendering () {
            this.timeList.forEach((item) => {
              this.date.forEach((v) => {
                let obj = { date: v, time: item }
                this.rili.push(obj)
              })
            })
          },
          // 点击选择
          selectcalendar (ite) {

            if (this.seleArr.findIndex(item => item.date.reservation_date == ite.date.reservation_date && item.time == ite.time) > -1) {
              this.$confirm('是否取消预约?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.cancelMake(ite)
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                })
              })

              return
            }
            if (!this.checkUser.patientName) {
              this.$message.error('请先选择用户')
              return
            }
            this.$confirm('是否预约?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ite.activeName = this.activeName
              ite.userName = this.checkUser.patientName
              this.seleArr.push(ite)
              console.log('this.seleArr', this.seleArr)
              this.checkUser = Object.assign(this.checkUser, ite)
              this.makeMachine(this.checkUser)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })


          },

          // 查询患者列表
          getUserList: function (name, callback) {
            var that = this
            $bb.ajax({
              url: URL + 'followup/service/patient/patientListDataCenterQuery',
              data: JSON.stringify({
                data: {
                  args: JSON.stringify({
                    draw: 1,
                    columns: [],
                    order: [],
                    start: 0,
                    length: 999999,
                  }),
                  patientName: name ? name : that.userName,
                  phoneNum: '',
                },
              }),
              success: function (res) {
                if (res.code == 500) location.href = location.href
                if (callback) {
                  callback(res)
                } else {
                  that.nameList = res.rows

                }
              },
            })
          },

          //取消预约
          cancelMake (item) {
            console.log('取消预约', item)
            let that = this
            $bb.ajax({
              url: URL + "/followup/reserve/cancel_machine_reservation2",
              data: JSON.stringify({
                data: {
                  machine_id: that.checkZlyId,
                  cure_date: item.date.reservation_date,
                  cure_time: item.time,
                }
              }),
              success: function (data) {
                if (data.success) {
                  that.getMachineReserved(that.checkZlyId)
                  that.$message.success(data.data.msg)
                }
              }
            })
          },

          // 预约
          makeMachine (item) {
            console.log('预约', item)
            let that = this
            $bb.ajax({
              url: URL + "/followup/reserve/make_machine_reservation2",
              data: JSON.stringify({
                data: {
                  machine_id: that.checkZlyId,
                  cure_date: item.date.reservation_date,
                  cure_time: item.time,
                  patient_name: item.userName,
                  patient_id: item.patientId
                }

              }),
              success: function (data) {
                if (data.success) {
                  console.log('data', data)
                  that.getMachineReserved(that.checkZlyId)
                  that.$message.success(data.data.msg)
                }
              }
            })
          },

          // 查询已预约
          getMachineReserved (id) {
            let that = this
            that.seleArr = []
            $bb.ajax({
              url: URL + "/followup/reserve/get_machine_reserved",
              data: JSON.stringify({
                data: {
                  machine_id: id
                }

              }),
              success: function (data) {
                if (data.success) {
                  console.log('预约列表 data', data)
                  if (data.data.length > 0) {
                    data.data.forEach(item => {
                      that.seleArr.push({ userName: item.user_name, date: { "reservation_date": item.cure_date }, time: item.cure_time })
                    })
                  } else {
                    that.seleArr = []
                  }
                  console.log('that.seleArr', that.seleArr)
                }
              }
            })
          },

          // 查询今日已预约数据
          getReservedToday (id) {
            let that = this
            that.seleArr = []
            $bb.ajax({
              url: URL + "/followup/reserve/get_machine_reserved_today",
              data: JSON.stringify({
                data: {
                  machine_id: id
                }

              }),
              success: function (data) {
                if (data.success) {
                  console.log('今日预约列表 data', data)
                  that.reservedToday = data.data
                  console.log('that.reservedToday', that.reservedToday)
                }
              }
            })
          },

        }

      })
    })
  </script>
</body>